<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="iso-8859-1">
        <title>Testing mousewheel plugin</title>

        <style>
            html {
                font: 13px Arial, sans-serif;
            }

            #stage {
                color: #fff;
                position: relative;
                zoom: 1;
            }

            #test1, #test2, #test3, #test4, #test5, #test6, #test7 {
                float: left;
            }

            #test1 {
                background-color: #000;
                width: 120px;
                height: 100px;
            }

            #test2 {
                background-color: #333;
                width: 120px;
                height: 100px;
            }

            #test3 {
                background-color: #666;
                width: 120px;
                height: 100px;
            }

            #test4 {
                background-color: #000;
                width: 120px;
                height: 100px;
            }

            #test5 {
                background-color: #333;
                padding: 5px;
                width: 400px;
                height: 400px;
            }

            #test6 {
                background-color: #666;
                padding: 5px;
                width: 250px;
                height: 250px;
            }

            #test7 {
                background-color: #000;
                padding: 5px;
                width: 100px;
                height: 100px;
            }

            #forceScroll {
                clear: both;
                height: 1000px;
            }

            #logger {
                position: absolute;
                top: 100px;
                left: 0;
                width: 480px;
                height: 310px;
                overflow: auto;
                z-index: 100;
            }

            #logger p {
                color: #000;
                padding: 2px;
                border-bottom: 1px solid #ccc;
                margin: 0;
            }

            #logger p:nth-child(even) {
                background-color: #ffffe8;
            }

            #logger p:nth-child(10n) {
                border-bottom-color: #000;
            }
        </style>

        <script>
            ( function() {
                var src,
                    verMatch = /\bjquery=(\d\.\d\.\d(?:\.slim)?(?:\.min)?)/,
                    version = ( window.location.search.match( verMatch ) || [ "", "git" ] )[ 1 ];
                if ( !version || version === "git" || version === "3.x-git" ) {
                    src = "https://releases.jquery.com/git/jquery-" + version + ".js"
                } else {
                    src = "https://code.jquery.com/jquery-" + version + ".js";
                }
                document.write( "<script src=\"http://" + src + ".js\"><\/script>" );
            } )();
        </script>
        <script>
            $( function() {
                $( "#userAgent" ).html( navigator.userAgent );
                $( "#jqueryVersion" ).html( $.fn.jquery );

                var loghandle = function( event, delta ) {
                    var o = "", id = event.currentTarget.id || event.currentTarget.nodeName;

                    o = "#" + id + ":";

                    if ( delta > 0 ) {
                        o += " up (" + delta + ")";
                    } else if ( delta < 0 ) {
                        o += " down (" + delta + ")";
                    }

                    if ( event.deltaY > 0 ) {
                        o += " north (" + event.deltaY + ")";
                    } else if ( event.deltaY < 0 ) {
                        o += " south (" + event.deltaY + ")";
                    }

                    if ( event.deltaX > 0 ) {
                        o += " east (" + event.deltaX + ")";
                    } else if ( event.deltaX < 0 ) {
                        o += " west (" + event.deltaX + ")";
                    }

                    o += " deltaFactor (" + event.deltaFactor + ")";

                    log( o );
                };

                $( document )
                  .on( "mousewheel", function( event, delta ) {
                      loghandle( event, delta );
                  } );

                $( "#test1" )
                  .on( "mousewheel", function( event, delta ) {
                      loghandle( event, delta );
                      log( "pageX: " + event.pageX + " pageY: " + event.pageY );
                  } );

                $( "#test2" )
                  .on( "mousewheel", function( event, delta ) {
                      loghandle( event, delta );
                      return false; // prevent default
                  } );

                $( "#test3" )
                  .hover(
                    function() {
                        log( "#test3: mouseover" );
                    },
                    function() {
                        log( "#test3: mouseout" );
                    }
                  )
                  .on( "mousewheel", function() {
                      log( "#test3: I should not have been logged" );
                  } )
                  .off( "mousewheel" );

                var testRemoval = function() {
                    log( "#test4: I should not have been logged" );
                };

                $( "#test4" )
                  .on( "mousewheel", function( event, delta ) {
                      loghandle( event, delta );
                      return false;
                  } )
                  .on( "mousewheel", testRemoval )
                  .on( "mousewheel", function( event, delta ) {
                      loghandle( event, delta );
                      return false;
                  } )
                  .off( "mousewheel", testRemoval );

                $( "#test5" )
                  .on( "mousewheel", function( event, delta ) {
                      loghandle( event, delta );
                      event.stopPropagation();
                      event.preventDefault();
                  } );

                $( "#test6" )
                  .on( "mousewheel", function( event, delta ) {
                      loghandle( event, delta );
                      event.stopPropagation();
                      event.preventDefault();
                  } );

                $( "#test7" )
                  .on( "mousewheel", function( event, delta ) {
                      loghandle( event, delta );
                      event.preventDefault();
                  } );

                function log( msg ) {
                    $( "#logger" ).append( "<p>" + msg + "<\/p>" )[ 0 ].scrollTop = 999999;
                }
            } );
        </script>
        <script src="../src/jquery.mousewheel.js"></script>
    </head>
    <body>
        <h1 id="banner">jQuery mousewheel.js Test with jQuery <span id="jqueryVersion"></span></h1>
        <h2 id="userAgent"></h2>

        <ul>
            <li><strong>Test1</strong> is just using the plain on <code>mousewheel()</code> with a function passed in and does not prevent default. (Also logs the value of <code>pageX</code> and <code>pageY</code> event properties.)</li>
            <li><strong>Test2</strong> should prevent the default action.</li>
            <li><strong>Test3</strong> should only log a <code>mouseover</code> and <code>mouseout</code> event. Testing <code>.off( "mousewheel" )</code>.</li>
            <li><strong>Test4</strong> has two handlers.</li>
            <li><strong>Test5</strong> is like Test2 but has children. The children should not scroll until mousing over them.</li>
            <li><strong>Test6</strong> is like Test5 but should not scroll children or parents.</li>
            <li><strong>Test7</strong> is like Test6 but has no children. It will propagate the event and scroll test 6 as well.</li>
        </ul>


        <div id="stage">
            <div id="test1"><p>Test1</p></div>
            <div id="test2"><p>Test2</p></div>
            <div id="test3"><p>Test3</p></div>
            <div id="test4"><p>Test4</p></div>
            <div id="test5">
                <p>Test5</p>
                <div id="test6">
                    <p>Test6</p>
                    <div id="test7"><p>Test7</p></div>
                </div>
            </div>
            <div id="logger"></div>
        </div>

        <div id="forceScroll"></div>
    </body>
</html>
